<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主题 - UnaBoot</title>
    <link rel="icon" href="${una}/ub-admin/img/favicon.png" type="image/x-icon">
    <link rel="shortcut icon" href="${una}/ub-admin/img/favicon.png" type="image/x-icon">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="${una}/ub-admin/plugin/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/font-awesome.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/ionicons.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/adminlte.css">
    <link rel="stylesheet" href="${una}/ub-admin/plugin/layer/skin/default/layer.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/unaboot-admin.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700">
    <style>
        .layui-layer-phimg img{
            max-height: 450px;
            max-width: 600px;
        }
    </style>
</head>
<body class="sidebar-mini layout-fixed layout-navbar-fixed text-md <!--sidebar-collapse-->">
    <div class="wrapper">
        <nav class="main-header navbar navbar-expand navbar-white navbar-light">
            <#include "/admin/inc/header.html">
        </nav>
        <aside class="main-sidebar sidebar-dark-primary ">
            <#include "/admin/inc/aside.html">
        </aside>
        <div class="content-wrapper bg-gray-custom">
            <div class="content-header pb-0">
                <div class="row mb-2">
                    <div class="col-12">
                        <h4 class="ml-2 mb-0 text-dark">主题</h4>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="container-fluid">
                    <div class="row text-sm mt-4 mb-4">
                        <div class="col-12">
                            <button type="button" id="upload-theme" class="btn btn-primary mr-2"><i class="fa fa-upload"></i> 上传主题</button>
                            <#if parentId == "themes">
                                <button class="btn btn-outline-primary mr-2" id="new-folder"><i class="fa fa-folder-open"></i> 新建主题文件夹</button>
                            <#else>
                                <button class="btn btn-outline-primary mr-2" id="new-folder"><i class="fa fa-folder-open"></i> 新建文件夹</button>
                            </#if>
                            <button class="btn btn-outline-primary mr-2" id="new-file"><i class="fa fa-file-text"></i> 新建文件</button>
                            <div class="btn-group">
                                <button type="button" id="delete" class="btn btn-outline-primary" disabled><i class="fa fa-trash"></i> 删除</button>
                                <button type="button" id="download" class="btn btn-outline-primary" disabled><i class="fa fa-download"></i> 下载</button>
                                <button type="button" id="rename" class="btn btn-outline-primary" disabled><i class="fa fa-pencil"></i> 重命名</button>
                                <button type="button" id="edit" class="btn btn-outline-primary" disabled><i class="fa fa-edit"></i> 编辑/预览</button>
                            </div>
                            <a href="javascript:void(0);" id="download-link" style="display: none;">download</a>
                        </div>
                    </div>
                    <div class="row text-sm mb-2">
                        <div class="col-12">
                            <span>
                                <#if parentId == "themes">
                                    全部主题：
                                <#else>
                                    <a href="${una}/admin/themes/" class="mr-2"><i class="fa fa-home">首页</i></a> |
                                    <a href="javascript:history.back(-1);"><i class="fa fa-level-up"></i> 返回</a>
                                    <i class="fa fa-angle-double-right mr-2 ml-2"></i>
                                    ${parentId}
                                </#if>
                            </span>
                            <input type="hidden" id="parentId" value="${parentId}">
                        </div>
                    </div>
                    <div class="row text-sm">
                        <table class="table table-hover theme-table">
                            <thead>
                            <tr>
                                <td><input id="check-all" type="checkbox"></td><td width="60%">文件名</td><td width="20%">大小</td><td width="18%">修改日期</td>
                            </tr>
                            </thead>
                            <tbody class="theme-data">
                                <#if data?? && data?size gt 0>
                                    <#list data as file>
                                        <tr>
                                            <td>
                                                <#if file.folder == true>
                                                    <input class="file-id" value="${file.id}" aria-name="${file.name}" aria-type="folder" type="checkbox">
                                                <#else>
                                                    <input class="file-id" value="${file.id}" aria-name="${file.name}" aria-type="file" type="checkbox">
                                                </#if>
                                            </td>
                                            <td>
                                                <#if file.folder ==true>
                                                    <i class="fa fa-folder-open text-yellow"></i>
                                                    <#if file.name == theme>
                                                        <a href="${una}/admin/themes/?pid=${file.id}" data-original-title="被激活的主题" data-toggle="tooltip" data-placement="right">
                                                            ${file.name} <i class="fa fa-check-circle text-danger"></i>
                                                        </a>
                                                    <#else>
                                                        <a href="${una}/admin/themes/?pid=${file.id}"> ${file.name}</a>
                                                    </#if>

                                                <#else>
                                                    <i class="fa fa-file text-yellow"></i> ${file.name}
                                                </#if>
                                            </td>
                                            <td>
                                                <#if file.folder == true>
                                                    -
                                                <#else>
                                                    ${file.size}
                                                </#if>
                                            </td>
                                            <td>${file.modifyDate?string("yyyy-MM-dd HH:ss")}</td>
                                        </tr>
                                    </#list>
                                <#else>
                                    <tr><td colspan="4">暂无任何文件</td></tr>
                                </#if>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <footer class="main-footer">
            <#include "/admin/inc/footer.html">
        </footer>
    </div>
    <script src="${una}/ub-admin/plugin/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/plugin/bootstrap/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/js/adminlte.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/plugin/layer/layer.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/js/unaboot-admin.core.js" type="text/javascript"></script>
    <script type="text/javascript">
        String.prototype.endsWith = function(sequence){
            if(sequence==null||sequence===""||this.length===0||sequence.length>this.length){
                return false;
            }

            if(this.substring(this.length-sequence.length)===sequence){
                return true;
            } else{
                return false;
            }
        };
        initialHeight();
        initializeView();
        function initialHeight(){
            scale();
        }
        window.onresize = function(){
            scale();
        };
        function scale(){
            var h = document.documentElement.clientHeight - 350;
            $("table .theme-data").height(h);
        }

        $("#upload-theme").on("click",function(){
            layer.open({
                type:2,
                title:"<i class='fa fa-upload'>上传主题包</i>",
                shadeClose:false,
                shade:0.4,
                offset:['100px'],
                area:['500px','300px'],
                content:'${una}/admin/themes/upload',
                resize:false,
                anim:1
            })
        });

        function initializeView(){
            var parent = $("#parentId").val();
            if(parent === "themes"){
                $("#new-folder").show();
                $("#new-file").hide();
            }else{
                $("#new-folder").show();
                $("#new-file").show();
            }
        }
        $(".file-id").change(function(){
            checkedChange();
        });
        $("#check-all").change(function(){
           var checked = $(this).is(":checked");
           if(checked){
               $("input[type=checkbox].file-id").each(function(){
                  $(this).prop("checked",true);
               });
           }else{
               $("input[type=checkbox].file-id").each(function(){
                   $(this).prop("checked",false);
               });
           }
            checkedChange();
        });

        $("#edit").on("click",function(){
            var element = $("input[type=checkbox].file-id:checked");
            var path = $(element).val();
            var type = $(element).attr("aria-type");
            var name = $(element).attr("aria-name");
            if(isFolder(type)){
                alert("文件夹无法被修改，您可以选择重命名该文件夹!");
                return false;
            }
            if(isImage(name)){
                previewImage(path,name);
                return false;
            }
            window.location.href="${una}/admin/themes/editor?path="+path;

        });

        $("#rename").on("click",function(){
            var element = $("input[type=checkbox].file-id:checked");
            var path = $(element).val();
            var name = $(element).attr("aria-name");
            if(name == "${theme}"){
                alert(name+"主题处于激活状态，无法重命名!");
                return false;
            }
            if(name == "default"){
                alert(name+"主题为默认主题，不允许进行修改!");
                return false;
            }
            layer.prompt({
                title:'<i class="fa fa-files-o"></i> 重命名',
                shadeClose:false,
                shade:0.4,
                offset:['100px'],
                formType:0
            },function(newName,index){
                var load = layer.load(2,{shade:[0.4,'#f0f0f0']});
                $.ajax({
                    type:'POST',
                    url:'${una}/admin/themes/rename',
                    data:{
                        path:path,
                        newName:newName
                    },
                    success:function(){
                        layer.close(load);
                        layer.alert("当前操作已成功执行!",{
                            title:"<i class='fa fa-info'></i> 提示",
                            icon:1,
                            shade:[0.4,"#fff"],
                            shadeClose:false,
                            time:0,
                            btn:['OK'],
                            yes:function(newIndex){
                                layer.close(index);
                                layer.close(newIndex);
                                window.location.reload();
                            }
                        });
                    },
                    error:function(){
                        layer.close(load);
                        layer.alert("当前操作失败!请稍后再试。",{
                            title:"<i class='fa fa-info'></i> 提示",
                            icon:0,
                            shade:[0.4,"#fff"],
                            shadeClose:false,
                            time:0,
                            btn:['OK'],
                            yes:function(newIndex){
                                layer.close(index);
                                layer.close(newIndex);
                            }
                        });
                    }
                });
            });
        });
        $("#delete").on("click",function(){
            var paths="";
            $("input[type=checkbox].file-id:checked").each(function(){
                paths+=$(this).val()+",";
            });
            paths = paths.substring(0,paths.length-1);
            var load = layer.load(2,{shade:[0.4,'#f0f0f0']});
            $.ajax({
                type:'POST',
                url:'${una}/admin/themes/remove',
                data:{
                    paths:paths
                },
                success:function(){
                    layer.close(load);
                    layer.alert("当前操作已成功执行!",{
                        title:"<i class='fa fa-info'></i> 提示",
                        icon:1,
                        shade:[0.4,"#fff"],
                        shadeClose:false,
                        time:0,
                        btn:['OK'],
                        yes:function(newIndex){
                            layer.close(newIndex);
                            window.location.reload();
                        }
                    });
                },
                error:function(){
                    layer.close(load);
                    layer.alert("当前操作失败!请稍后再试。",{
                        title:"<i class='fa fa-info'></i> 提示",
                        icon:0,
                        shade:[0.4,"#fff"],
                        shadeClose:false,
                        time:0,
                        btn:['OK'],
                        yes:function(newIndex){
                            layer.close(newIndex);
                        }
                    });
                }
            })
        });

        $("#download").on("click",function(){
            var paths="";
            $("input[type=checkbox].file-id:checked").each(function(){
                paths+=$(this).val()+",";
            });
            paths = paths.substring(0,paths.length-1);
            $("a#download-link").attr("href","${una}/admin/themes/download?paths="+paths);
            $("a#download-link")[0].click();
        });

        function previewImage(path,name){
            var url = "${una}/"+path.substring(7,path.length);
            layer.photos({
                photos: {
                    title:name,
                    id:0,
                    start:0,
                    data:[{
                        alt:name,
                        pid:0,
                        src:url,
                        thumb:url
                    }]
                },
                shade:[0.4,'#f0f0f0'],
                area:['600px','450px'],
                anim:5

            });
        }
        function checkedChange(){
            var size = $("input[type=checkbox].file-id:checked").length;
            if(size === 1){
                $("#delete").attr("disabled",false);
                $("#download").attr("disabled",false);
                $("#rename").attr("disabled",false);
                $("#edit").attr("disabled",false);
            }else if(size >1){
                $("#delete").attr("disabled",false);
                $("#download").attr("disabled",false);
                $("#rename").attr("disabled",true);
                $("#edit").attr("disabled",true);
            }else{
                $("#delete").attr("disabled",true);
                $("#download").attr("disabled",true);
                $("#rename").attr("disabled",true);
                $("#edit").attr("disabled",true);
            }
            if(size == ${data?size}){
                $("input#check-all").prop("checked",true);
            }else{
                $("input#check-all").prop("checked",false);
            }
        }
        $("#new-folder").on("click",function(){
            var parent = $("#parentId").val();
            if(parent == null || parent.trim() === ""){
                parent = "themes";
            }
            var title = '<i class="fa fa-folder-open"></i> 新建文件夹';
            if(parent === "themes"){
                title = '<i class="fa fa-folder-open"></i> 新建主题文件夹';
            }
            layer.prompt({
                title:title,
                shadeClose:false,
                shade:0.4,
                offset:['100px'],
                formType:0
            },function(folder,index){
                var load = layer.load(2,{shade:[0.4,'#f0f0f0']});
               $.ajax({
                   type:'POST',
                   url:'${una}/admin/themes/newFolder',
                   data:{
                       path:parent+"/"+folder
                   },
                   success:function(){
                       layer.close(load);
                       layer.alert("当前操作已成功执行!",{
                           title:"<i class='fa fa-info'></i> 提示",
                           icon:1,
                           shade:[0.4,"#fff"],
                           shadeClose:false,
                           time:0,
                           btn:['OK'],
                           yes:function(newIndex){
                               layer.close(index);
                               layer.close(newIndex);
                               window.location.reload();
                           }
                       });
                   },
                   error:function(){
                       layer.close(load);
                       layer.alert("当前操作失败!请稍后再试。",{
                           title:"<i class='fa fa-info'></i> 提示",
                           icon:0,
                           shade:[0.4,"#fff"],
                           shadeClose:false,
                           time:0,
                           btn:['OK'],
                           yes:function(newIndex){
                               layer.close(index);
                               layer.close(newIndex);
                           }
                       });
                   }
               });
            });
        });
        $("#new-file").on("click",function(){
            var parent = $("#parentId").val();
            if(parent == null || parent.trim() === ""){
                parent = "themes";
            }
            layer.prompt({
                title:'<i class="fa fa-file"></i> 新建文件',
                shadeClose:false,
                shade:0.4,
                offset:['100px'],
                formType:0
            },function(name,index){
                if(isImage(name)){
                    alert("不支持创建图片文件");
                    return false;
                }else{
                    var load = layer.load(2,{shade:[0.4,'#f0f0f0']});
                    $.ajax({
                        type:'POST',
                        url:'${una}/admin/themes/newFile',
                        data:{
                            path:parent+"/"+name
                        },
                        success:function(){
                            layer.close(load);
                            layer.alert("当前操作已成功执行!",{
                                title:"<i class='fa fa-info'></i> 提示",
                                icon:1,
                                shade:[0.4,"#fff"],
                                shadeClose:false,
                                time:0,
                                btn:['OK'],
                                yes:function(newIndex){
                                    layer.close(index);
                                    layer.close(newIndex);
                                    window.location.href="${una}/admin/themes/editor?path="+parent+"/"+name;
                                }
                            });
                        },
                        error:function(){
                            layer.close(load);
                            layer.alert("当前操作失败!请稍后再试。",{
                                title:"<i class='fa fa-info'></i> 提示",
                                icon:0,
                                shade:[0.4,"#fff"],
                                shadeClose:false,
                                time:0,
                                btn:['OK'],
                                yes:function(newIndex){
                                    layer.close(index);
                                    layer.close(newIndex);
                                }
                            });
                        }
                    });
                }
            });
        });

        function isFolder(typeName){
            if(typeName === "folder"){
                return true;
            }else {
                return false;
            }
        }

        function isImage(name){
            return !!(name.endsWith(".png") || name.endsWith(".jpg") || name.endsWith(".jpeg") || name.endsWith(".gif") || name.endsWith(".bmp") || name.endsWith(".webp") || name.endsWith(".svg"));
        }
        $("[data-toggle='tooltip']").tooltip();
    </script>
</body>
</html>